<template>
    <div style="margin:0 auto;height:900px;overflow-x: hidden;overflow-y: scroll;">
        <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
            <el-row :gutter="26">
                <!-- 搜索框 -->
                <el-col :span="2.5">
                <el-input v-model="listQuery.title" placeholder="请输入课程名称" style="width:150px" clearable></el-input>
                </el-col>
                <el-col :span="3.3">
                    领取时间：<el-date-picker
                        v-model="listQuery.starttime"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width:280px">
                    </el-date-picker>
                </el-col>
                <el-col  :span="3.3">
                    提现状态：<el-select style="width:100px" v-model="listQuery.money_item_status" clearable placeholder="请选择">
                        <el-option
                        v-for="item in listQuery.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3.3">
                    手机号：<el-input style="width:150px" v-model="listQuery.phone" placeholder="请输入手机号" clearable></el-input>
                </el-col>
                <el-col :span="2.2">
                    <el-input style="width:150px" v-model="listQuery.weChat_nickname" placeholder="微信昵称" clearable></el-input>
                </el-col>
                <el-col :span="2.2">
                    <el-input style="width:150px" v-model="listQuery.team_name" placeholder="团队名称" clearable></el-input>
                </el-col>
                <el-col  :span="2.2">
                    <el-button style="width:100px" type="primary" icon="el-icon-search" @click="searchActivity()">搜索</el-button>
                </el-col>
                <el-col  :span="2.2">
                    <el-button type="primary" @click="exportExcel()">导出excel</el-button>
                </el-col>
            </el-row>
        </div>
        <div style="width: 98%;margin: 10px auto 0"></div>
        <div>
            <el-row>
                <el-button type="primary" @click="select_all()">全选</el-button>
                <el-button type="primary" @click="select_not_all()">全不选</el-button>
                <el-button type="success" @click="all_Effective_income()">确认有效收益</el-button>
                <el-button type="success" @click="all_Invalid_income()">确认无效收益</el-button>
                <span style="margin-left:50px">前台平台总金额：<el-input style="width:150px" v-model="allmoney" placeholder="请输入平台总金额" clearable></el-input>万</span>
                <el-button style="width:100px" type="primary" icon="el-icon-search" @click="moneychange">确定</el-button>
            </el-row>
        </div>
        <div style="width: 98%;margin: 10px auto 0"></div>
        <el-table :data="onlinecoursesList" class="table" border :key="onlinecoursesList.length" :default-sort = "{prop: 'date', order: 'ascending'}" v-loading="loading" element-loading-text="拼命加载中....">
            <el-table-column label="" align="center">
                <template slot-scope="{row}">
                    <el-checkbox v-model="row.checked" @change="setallList(row)"></el-checkbox>
                </template>
            </el-table-column>

            <el-table-column label="序号" prop="date" sortable align="center">
                <template slot-scope="{row}">
                <span>{{row.order_id}}</span>
                <!-- <image :src="row.WeChat_Avatar"></image> -->
                </template>
            </el-table-column>

            <el-table-column label="微信头像" align="center">
                <template slot-scope="{row}">
                <!-- <span>{{row.WeChat_Avatar}}</span> -->
                <img v-if="row.customer" :src="row.customer.avatar" class=""></img>
                </template>
            </el-table-column>

            <el-table-column label="微信昵称" align="center">
                <template slot-scope="{row}">
                <span v-if="row.customer">{{row.customer.nickname}}</span>
                </template>
            </el-table-column>

            <el-table-column label="手机号" align="center">
                <template slot-scope="{row}">
                <span>{{row.phone}}</span>
                </template>
            </el-table-column>

            <el-table-column label="课程名称" align="center">
                <template slot-scope="{row}">
                <span>{{row.title}}</span>
                </template>
            </el-table-column>

            <el-table-column label="课程优惠价" align="center">
                <template slot-scope="{row}">
                <span>{{row.special_price}}</span>
                </template>
            </el-table-column>

            <el-table-column label="领取时间" align="center">
                <template slot-scope="{row}">
                <span>{{row.date_modified}}</span>
                </template>
            </el-table-column>

            <el-table-column label="业务员" align="center">
                <template slot-scope="{row}">
                    <span v-if="row.shared_customer1!=null">{{ row.shared_customer1.shared_customer_nickname }}</span>
                    <span v-else-if="row.shared_customer2!=null">{{ row.shared_customer2.shared_customer_nickname }}</span>
                    <span v-else>无</span>
                </template>
            </el-table-column>

            <el-table-column label="所属店铺" align="center">
                <template slot-scope="{row}">
                <span v-if="row.store">{{row.store.name}}</span>
                </template>
            </el-table-column>

            <el-table-column label="收益状态" align="center">
                <template slot-scope="{row}">
                <span v-if="row.new_user_money">
                    <span v-if="row.new_user_money.status=='invalid'" style="color:#F56C6C;">失效了</span>
                    <span v-else-if="row.new_user_money.status=='in_confirm'" style="color:#409EFF">确认中</span>
                    <span v-else-if="row.new_user_money.status=='confirmed'" style="color:#E6A23C">已确认</span>
                    <span v-else>无</span>
                </span>
                <span v-else-if="row.shared_customer1">
                    <span v-if="row.shared_customer1.status=='invalid'" style="color:#F56C6C;">失效了</span>
                    <span v-else-if="row.shared_customer1.status=='in_confirm'" style="color:#409EFF">确认中</span>
                    <span v-else-if="row.shared_customer1.status=='confirmed'" style="color:#E6A23C">已确认</span>
                    <span v-else>无</span>
                </span>
                <span v-else-if="row.shared_customer2">
                    <span v-if="row.new_user_money.status=='invalid'" style="color:#F56C6C;">失效了</span>
                    <span v-else-if="row.new_user_money.status=='in_confirm'" style="color:#409EFF">确认中</span>
                    <span v-else-if="row.new_user_money.status=='confirmed'" style="color:#E6A23C">已确认</span>
                    <span v-else>无</span>
                </span>
                <span v-else></span>
                </template>
            </el-table-column>

            <el-table-column label="推荐收益" align="center">
                <template slot-scope="{row}">
                    <span>{{row.first_money}}</span>
                </template>
            </el-table-column>

            <el-table-column label="上级店铺名称" align="center">
                <template slot-scope="{row}">
                <span v-if="row.shared_customer1">{{row.shared_customer1.name}}</span>
                </template>
            </el-table-column>

            <el-table-column label="上级店铺收益" align="center">
                <template slot-scope="{row}">
                <span>{{row.second_money}}</span>
                </template>
            </el-table-column>

            <el-table-column label="公司员工" align="center">
                <template slot-scope="{row}">
                <span>{{row.company_staff_name}}</span>
                </template>
            </el-table-column>

            <el-table-column label="收益状态" align="center">
                <template slot-scope="{row}">
                <span>{{row.status}}</span>
                </template>
            </el-table-column>

            <el-table-column label="收益规则" align="center">
                <template slot-scope="{row}">
                <span>{{row.illustration}}</span>
                </template>
            </el-table-column>
            
            <el-table-column label="报名科目" align="center">
                <template slot-scope="{row}">
                <span v-if="row.students[0][0]">{{row.students[0][0].custom_field_value}}</span>
                </template>
            </el-table-column>

            <el-table-column label="孩子姓名" align="center">
                <template slot-scope="{row}">
                <span v-if="row.students[0][1]">{{row.students[0][1].custom_field_value}}</span>
                </template>
            </el-table-column>

            <el-table-column label="联系电话" align="center">
                <template slot-scope="{row}">
                <span v-if="row.students[0][2]">{{row.students[0][2].custom_field_value}}</span>
                </template>
            </el-table-column>

            <el-table-column label="孩子年龄" align="center">
                <template slot-scope="{row}">
                <span v-if="row.students[0][3]">{{row.students[0][3].custom_field_value}}</span>
                </template>
            </el-table-column>

            <el-table-column label="孩子性别" align="center">
                <template slot-scope="{row}">
                <span v-if="row.students[0][4]">{{row.students[0][4].custom_field_value}}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" style="width:100px;">
                <template slot-scope="{row}">
                    <!-- <el-button @click="to_be_confirmed(index)">待确认</el-button> -->
                    <el-button @click="Effective_income(row.order_id)">有效收益</el-button>
                    <el-button @click="Invalid_income(row.order_id)">无效收益</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
    </div>
</template>
<script>
import {getonlinecourses,del,edit,getorder,get_excel,get_order_custom_info,get_select,confirmed,invalid,sys_dict,add_sys_dict} from '@/api/thk/onlinecourses'
import {detail} from "@/api/thk/store"
import {list as getCustomerList} from '@/api/thk/customer'
import store from '@/store'
export default {
    name:'',
    data(){
        return{
            listQuery:{
                date_added_start:'',
                title:'',
                start_time:'',
                date_added_end:'',
                page:1,
                pagesize:10,
                online_courses_id:1,
                money_item_status:'',
                options: [{
                    value: 'confirmed',
                    label: '已确认'
                    }, {
                    value: 'in_confirm',
                    label: '确认中'
                    }, {
                    value: 'invalid',
                    label: '失效'
                }],
                phone:'',
                starttime:'',
                team_name:'',
                weChat_nickname:'',
            },
            loading:true,
            checkedCities:['中文'],
            onlinecoursesList:[],
            total: undefined,
            customerList:[],
            allList:[],
            List:[],
            allmoney:0,
        }
    },
    inject: ['reload'],
    created() {
      this.getorderList()
      this.get_sys_dict()
    //   this.getCustomerList()
    //   this.getalllist()
    },
    methods:{
        setallList(row){
            // this.onlinecoursesList[index].checked=true
            // row.checked=true
            let lingshi=this.onlinecoursesList
            this.onlinecoursesList=[]
            let that = this
            lingshi.map((item,index)=>{
                if(item.order_id==row.order_id){
                    // item.checked=!item.checked
                    // item.checked=!item.checked
                    if(item.checked){
                        this.allList.push(row)
                    }else{
                        this.allList.map((res,index)=>{
                            if(res.order_id==row.order_id){
                                this.allList.splice(index,1)
                            }
                        })
                    }
                    this.onlinecoursesList.push(item)
                    console.log("123",item)
                }else{
                    this.onlinecoursesList.push(item)
                }
            })
            console.log(this.allList)
            // this.reload()
        },
        moneychange(){
            add_sys_dict(store.getters.token,{value:this.allmoney}).then(res=>{

            })
        },
        async getshuju(item){
            console.log(this.List.length,"9987")
            let that=this
            this.List.map((res,index)=>{
                console.log(res.order_id==item.order_id,index)
                if(res.order_id==item.order_id){
                    that.onlinecoursesList[index]=item
                }
                if(that.onlinecoursesList.length==10&&that.onlinecoursesList[0]&&that.onlinecoursesList[1]&&that.onlinecoursesList[2]&&that.onlinecoursesList[3]&&that.onlinecoursesList[4]&&that.onlinecoursesList[8]&&that.onlinecoursesList[5]&&that.onlinecoursesList[6]&&that.onlinecoursesList[7]&&that.onlinecoursesList[9]){
                    that.loading=false
                }
            })
            
        },
        get_sys_dict(){
            sys_dict(store.getters.token).then(res=>{
                this.allmoney=res.data.list.data[res.data.list.data.length-1].value
            })
        },
        exportExcel() {
            // console.log("123",this.allList)
            if(this.allList.length>0){
                this.downloadLoading = true
                import('@/vendor/Export2Excel').then(excel => {
                    const tHeader = [
                        '序号', 
                        "昵称",
                        "手机号",
                        '课程名称',
                        '课程优惠价',
                        '领取时间',
                        '业务员',
                        '所属店铺',
                        '推荐收益',
                        '公司员工',
                        '收益状态',
                        '报名科目',
                        '孩子姓名',
                        '联系电话',
                        '孩子年龄',
                        '孩子性别'
                    ]
                    const filterVal = [
                        'order_id', 
                        ["customer","nickname"],
                        'customer_telephone',
                        'title',
                        'special_price',
                        'date_modified',
                        ['shared_customer1','shared_customer_nickname'],
                        ['store','name'],
                        'Recommended_income',
                        'contact',
                        ['shared_customer1','status'],
                        ['students',0,'custom_field_value'],
                        ['students',1,'custom_field_value'],
                        ['students',2,'custom_field_value'],
                        ['students',3,'custom_field_value'],
                        ['students',4,'custom_field_value'],
                    ]
                    const data = this.formatJson(filterVal)
                    excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: 'table-list'
                    })
                    this.downloadLoading = false
                })
            }else{
                this.$message.error("请选择后重试")
            }
        },
        formatJson(filterVal) {
            return this.allList.map(v => filterVal.map(j => {
                // console.log(v)
                if(j.length==2){
                    // console.log(v[j[0]]!=null,"111111111111111")
                    if(v[j[0]]!=null){
                        if(j[1]=='status'){
                            if(v[j[0]][j[1]]=='invalid'){
                                return "无效"
                            }else if(v[j[0]][j[1]]=='in_confirm'){
                                return "确认中"
                            }else if(v[j[0]][j[1]]=='confirmed'){
                                return "已确认"
                            }
                        }else{
                            // console.log(j[1])
                            return v[j[0]][j[1]]
                        }
                    }else{
                        if(j[1]=='status'){
                            if(v['shared_customer2']!=null){
                                if(v['shared_customer2'][j[1]]=='invalid'){
                                    return "无效"
                                }else if(v['shared_customer2'][j[1]]=='in_confirm'){
                                    return "确认中"
                                }else if(v['shared_customer2'][j[1]]=='confirmed'){
                                    return "已确认"
                                }
                            }else{
                                return ''
                            }
                        }else{
                            if(v['shared_customer2']!=null){
                                return v['shared_customer2'][j[1]]
                            }else{
                                return ''
                            }
                        }
                    }
                }else if(j.length==3){
                    // console.log(v[j[0]][0][j[1]][j[2]],"9987")
                    if(v[j[0]][0][j[1]]){
                        console.log(v[j[0]][0][j[1]],"9987")
                        return v[j[0]][0][j[1]][j[2]]
                    }
                }else{
                    return v[j]
                }
            }))
        },
        getCustomerName(customer_id){
            let customer = this.customerList.find(customer => {
            return customer.customer_id == customer_id
            })

            if(customer){
                console.log(customer.nickname)
                return customer.nickname
            }

            return ''

        },

        handleSizeChange(val) {
            this.loading=true
            this.listQuery.pagesize = val
            this.getorderList()
        },
        handleCurrentChange(val) {
            this.loading=true
            this.listQuery.page = val
            this.getorderList()
        },
        getCustomerList(){
            getCustomerList(store.getters.token,{pagesize:1000000}).then(res=>{
                this.customerList = res.data.list.data
            }).then(err => {
                console.log(err)
            })
        },
        async getorderList(){
            this.onlinecoursesList=[]
            let data={}
            if(this.listQuery.starttime){
                console.log("莫名进来了")
                data={
                    title:this.listQuery.title,
                    date_added_start:new Date(this.listQuery.starttime[0]).getTime()/1000,
                    date_added_end:new Date(this.listQuery.starttime[1]).getTime()/1000,
                    customer_telephone:this.listQuery.phone,
                    page:this.listQuery.page,
                    pagesize:this.listQuery.pagesize,
                    money_item_status:this.listQuery.money_item_status
                }
            }else{
                data={
                    title:this.listQuery.title,
                    customer_telephone:this.listQuery.phone,
                    page:this.listQuery.page,
                    pagesize:this.listQuery.pagesize,
                    item_status:this.listQuery.money_item_status,
                    nickname:this.listQuery.weChat_nickname,
                    name:this.listQuery.team_name

                }
            }
            console.log(data)
            await getorder(store.getters.token,data).then(res=>{
                this.total = res.data.list.total
                this.List=res.data.list.data
               res.data.list.data.map(item=>{
                    item.checked=false
                    // console.log(item,"6977")
                    // if(item.store){
                        const datas={
                            store_id:item.store?item.store.customer_store_id:0,
                            order_id:item.order_id
                        }
                        get_order_custom_info(store.getters.token,datas).then(res=>{
                            res.data.list.map(obj=>{
                                item.students=obj.students
                            })
                            get_select(store.getters.token,datas).then(ress=>{
                                ress.data.list.map(res=>{
                                    if(item.online_courses_id==res.id){
                                        
                                        item.illustration=res.illustration
                                        item.first_money=res.first_money
                                        item.second_money=res.second_money
                                        // console.log(item)
                                        let shuzhu=item
                                        this.getshuju(shuzhu)
                                    }
                                })
                            })
                            
                        })
                    // }
                })
            })
        },
        async getalllist(){
            const data={
                page:1,
                pagesize:10000
            }
            await getorder(store.getters.token,data).then(res=>{
                res.data.list.data.map(item=>{
                    item.checked=false
                    const datas={
                        store_id:item.store.customer_store_id,
                        order_id:item.order_id
                    }
                    get_order_custom_info(store.getters.token,datas).then(res=>{
                        res.data.list.map(obj=>{
                            item.students=obj.students[0]
                        })
                        get_select(store.getters.token,datas).then(ress=>{
                            ress.data.list.map(res=>{
                                if(item.online_courses_id==res.id){
                                    
                                    item.illustration=res.illustration
                                    item.first_money=res.first_money
                                    item.second_money=res.second_money
                                    this.allList.push(item)
                                }
                            })
                        })

                        
                    })
                });
                console.log(this.onlinecoursesList,"9978")
                this.loading=false
            })
        },
        searchActivity(){
            this.loading=true
            this.getorderList()
        },
        addcoursrs(){

        },
        select_all(){
            let lingshi=this.onlinecoursesList
            this.onlinecoursesList=[]
            lingshi.map(res=>{
                if(res.checked){
                    
                }else{
                    res.checked=true
                    this.allList.push(res)
                }
                console.log(this.allList)
                this.onlinecoursesList.push(res)
            })
        },
        select_not_all(){
            let lingshi=this.onlinecoursesList
            this.onlinecoursesList=[]
            lingshi.map(res=>{
                if(res.checked){
                    res.checked=false
                    this.onlinecoursesList.push(res)
                    this.allList.map((item,index)=>{
                        if(res.order_id==item.order_id){
                            this.allList.splice(index,1)
                        }
                    })
                }else{
                    this.onlinecoursesList.push(res)
                }
                console.log(this.allList)
                // console.log(this.allList)
                // this.onlinecoursesList.push(res)
            })
        },
        async all_Effective_income(){
            await this.onlinecoursesList.forEach(res=>{
                if(res.checked){
                    this.Effective_income(res.order_id)
                }
            })
        },
        async Effective_income(index){
            console.log(index)
            const data={
                order_id:index
            }
            await confirmed(store.getters.token,data).then(res=>{
                console.log(res.data.msg,"ceshi")
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                // this.reload()
            })
            // this.incomeList[index].Income_status="已确认"
        },
        async all_Invalid_income(){
            await this.onlinecoursesList.forEach(res=>{
                if(res.checked){
                    this.Invalid_income(res.order_id)
                    this.$message.success("修改成功")
                }
            })
        },
        Invalid_income(index){
            // this.incomeList[index].Income_status="失效"
            const data={
                order_id:index
            }
            invalid(store.getters.token,data).then(res=>{
                this.$message({
                    message: "修改成功",
                    type: 'success'
                });
                // this.reload()
            })
        }
    }
}
</script>
<style scoped>
    img{
        height: 50px;
        width: 50px;
        margin-right: 5px;
    }
    ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }   
</style>